<template>
    <div class="level">
        <h1>医院</h1>
        <div class="content">
            <div class="left">等级：</div>
            <ul class="right">
                <li :class="{active:activeFlag == ''}">全部</li>
                <li v-for="level in levelArr" :key="level.id"
                    :class="{active:activeFlag == level.value}"                    
                     @click="changeLevel(level.value)"  
                >{{ level.name }}</li>
            </ul>
        </div>
        <div class="address">
            <div class="area">地区：</div>
            <ul class="allarea">
                <li :class="{active:activeFlag2 == ''}">全部</li>
                <li v-for="region in regionArr" :key="region.id"
                    :class="{active:activeFlag2 == region.value}"
                    @click="changeRegion(region.value)"
                >{{ region.name }}</li>
            </ul>
        </div>

    </div>
</template>

<script setup lang="ts">
import { reqHospitalLevelAndRegion } from "@/api/home/index";
import { onMounted,ref } from "vue";
import type {HospitalLevelAndRegionResponseData} from '@/api/home/type'
import {HospitalLevelAndRegionArr} from '@/api/home/type'
// 定义一个数组存储医院等级的数据
let levelArr = ref<HospitalLevelAndRegionArr>([])
// 定义一个数组储存医院位置的数据
let regionArr = ref<HospitalLevelAndRegionArr>([])
// 控制医院等级高亮响应式数据
let activeFlag = ref<string>('')
// 控制医院位置高亮相应数据
let activeFlag2 = ref<string>('')
// 组件挂载完毕
onMounted(() => {
    getLevel()
    getRegion()
})
// 获取医院等级的数据
const getLevel =async () => {
    let resultLevel:HospitalLevelAndRegionResponseData = await reqHospitalLevelAndRegion('HosType')
    if(resultLevel.code == 200){
        levelArr.value = resultLevel.data
    }   
}

// 获取医院位置的数据
const getRegion =async () => {
    let resultRegion:HospitalLevelAndRegionResponseData = await reqHospitalLevelAndRegion('Beijin')  
    if(resultRegion.code == 200){
        regionArr.value = resultRegion.data
    }
    
}
// 改变等级选择的函数
const changeLevel = (level:string) =>{
    activeFlag.value = level
    // 触发自定义事件:将医院等级传回给父组件
    $emits('getlevel',level)    
}

// 改变位置选择的函数
const changeRegion = (region:string) =>{
    activeFlag2.value = region
    // 触发自定义事件:将医院位置传回给父组件
    $emits('getRegion',region)
}

// 触发自定义事件：将医院等级和位置参数回传给父组件
let $emits = defineEmits(['getlevel','getRegion'])
</script> 

<style scoped lang="scss">
.level {
    width: 100%;
    height: 140px;
    color: rgb(87, 87, 87);
    font-size: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    li{
        margin-right: 30px;
        &.active{
            color: skyblue;
        }
    }
    li:hover{
        color: skyblue;
        cursor: pointer;
    }

    .content {
        display: flex;
        
        .right {
            display: flex;
            
        }
    }

    .address {
        display: flex;
        .area{
            width: 43px;
        }
        .allarea{
            display: flex;
            flex-wrap: wrap;
            li{
                margin-bottom:6px ;

            }
        }
    }
}
</style>